<template>
  <div class="p-4 bg-white rounded-lg border border-gray-200">
    <h3 class="text-lg font-semibold mb-4">AI服务状态测试</h3>
    
    <div class="space-y-4">
      <!-- 服务状态 -->
      <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-2">
          <div :class="serviceStatus.n8n ? 'bg-green-500' : 'bg-red-500'" class="w-3 h-3 rounded-full"></div>
          <span class="text-sm">N8N Webhook</span>
        </div>
      </div>

      <!-- 测试消息 -->
      <div class="space-y-2">
        <label class="text-sm font-medium">测试消息:</label>
        <div class="flex space-x-2">
          <input 
            v-model="testMessage" 
            placeholder="输入测试消息..."
            class="flex-1 px-3 py-2 border border-gray-300 rounded"
          />
          <button 
            @click="sendTestMessage" 
            :disabled="isLoading"
            class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700 disabled:bg-gray-300"
          >
            {{ isLoading ? '发送中...' : '发送测试' }}
          </button>
        </div>
      </div>

      <!-- 测试结果 -->
      <div v-if="testResult" class="p-3 bg-gray-50 rounded">
        <h4 class="font-medium mb-2">测试结果:</h4>
        <div class="text-sm space-y-1">
          <div><strong>服务:</strong> {{ testResult.service }}</div>
          <div><strong>响应时间:</strong> {{ testResult.processingTime }}ms</div>
          <div><strong>回复:</strong> {{ testResult.message }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { chatService } from '../../api/chatService'

const serviceStatus = ref({ n8n: false })
const testMessage = ref('Hello, this is a test message')
const isLoading = ref(false)
const testResult = ref<any>(null)

// 检查服务状态
const checkServiceStatus = async () => {
  try {
    serviceStatus.value = await chatService.getServiceStatus()
  } catch (error) {
    console.error('检查服务状态失败:', error)
  }
}

// 发送测试消息
const sendTestMessage = async () => {
  if (!testMessage.value.trim() || isLoading.value) return

  isLoading.value = true
  testResult.value = null

  try {
    const response = await chatService.sendMessage(testMessage.value)
    testResult.value = {
      service: response.metadata?.model || 'unknown',
      processingTime: response.metadata?.processingTime || 0,
      message: response.message
    }
  } catch (error: any) {
    testResult.value = {
      service: 'error',
      processingTime: 0,
      message: error.message || '测试失败'
    }
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  checkServiceStatus()
})
</script>
